<template>
	<view class="content">
		<view class="travel">
			<view class="travel-left">
				<text>热门景点美食推荐</text>
			</view>
			<view class="travel-right" @click="goscenicdetail()">
				<text>更多</text>
				<u-icon name="arrow-right" size="30" color="#ccc"></u-icon>
			</view>
		</view>
		<view class="u-scroll">
			<u-swiper :list="AttractionList" keyName="images" showTitle circular :autoplay="true" radius="5"
				bgColor="#ffffff" :indicator="true" height="400rpx"></u-swiper>
		</view>

		<!-- <u-scroll-list :indicator="false">
			<view class="u-scroll" v-for="(item, index) in AttractionList" :key="index"
				@click="getRoutedetails(item.id)">
				<image
					:src="item.images? $u.fileBaseUrl + item.images.split(',')[0] :'../static/images/index/zwtp.png' ">
				</image>
				<view class="scroll-title">
					{{item.name}}
				</view>
			</view>
		</u-scroll-list> -->

		<view class="travel">
			<view class="travel-left">
				<text>当地出行路线推荐</text>
			</view>
			<view class="travel-right" @click="goRecommendation()">
				<text>更多</text>
				<u-icon name="arrow-right" size="30" color="#ccc"></u-icon>
			</view>
		</view>

		<view class="box-recommendation">
			<view class="recommendation" v-for="(item,index) in PathList" :key="index">
				<view class="recommendation-left">
					<image src="../static/images/index/h.png" mode="widthFix"></image>
					<text> {{item.pathName}}</text>
				</view>
				<view @click="goRecommendationDetail(item.id)" class="recommendation-button">
					查看详情
				</view>
			</view>
		</view>

		<view class="Wall">
			<text>当地留言墙</text>
		</view>
		<view class="message-wall" @touchstart="onTouchStart" @touchend="onTouchEnd">
			<!-- <view class="decoration-dot top-left"></view>
			<view class="decoration-dot bottom-left"></view>
			<view class="decoration-dot bottom-right"></view> -->
			<u-empty v-if="noMoreData" mode="data" width="50%" textSize="30"
				icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<swiper v-else class="message-swiper" @change="onSwiperChange" :current="currentSwiperIndex">
				<swiper-item v-for="(page, pageIndex) in messagePages" :key="pageIndex">
					<view class="message-stack">
						<view v-for="(message, index) in page" :key="index" class="message-card"
							:class="{ 'own-message': message.isOwn }" :style="{ 
			                left: `${message.left}%`,
			                top: `${message.top}rpx`,
			                transform: `rotate(${message.rotation}deg)`,
			                zIndex: page.length - index
			              }">
							<view v-if="message.isMe==1" class="own-message-tag">我的留言</view>
							<image :src="$u.fileBaseUrl + message.image" mode="aspectFill"></image>
							<text class="message-content">{{ message.message }}</text>
						</view>
						<!-- <view class="">
							{{currentSwiperIndex }} /{{messagePages.length}}
						</view> -->
					</view>
				</swiper-item>
			</swiper>
			<view class="add-message">
				<button @click="goToLeaveMessage" class="leave-message-btn">
					<text class="btn-icon">✏️</text>
					去留言
				</button>
			</view>
		</view>

		<view class="modal" v-if="orderCount != 0">
			<u-modal :show="showmessage" :title="title" :content='content' :showCancelButton="true" @confirm="confirm"
				@cancel="showmessage = false">
				<view class="value">
					<view class="boxValue">
						<image :src="from.image ? $u.fileBaseUrl + from.image : '../static/images/index/sc.png'"
							mode="aspectFill" @click="checkAvatar"></image>
						<view class="label">点击上传留言墙图片哦!</view>
					</view>
					<input type="text" placeholder="请输入您的留言哦!" v-model="from.message" />
				</view>
			</u-modal>
		</view>
		<view class="modal" v-else>
			<u-modal :show="show" :title="title" confirmText="选路线" :content='content' :showCancelButton="true"
				@confirm="submitconfirm" @cancel="show = false">
				<view class="value">
					<view class="label-title">只有体验过当地路线才可以留言哦，快去挑选这里的路线吧~~</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		name: "area",
		props: ['AttractionList', 'PathList', 'Attractionimage', 'orderCount'],
		data() {
			return {
				showmessage: false,
				from: {
					image: "",
					message: ''
				},
				messagePages: [],
				currentSwiperIndex: 0,
				page: {
					pageNum: 1,
					pageSize: 9,
				},
				isLoading: false,
				noMoreData: false,
				show: false
			}
		},
		onLoad() {},
		destroyed() {
			uni.$off('onReachBottom') // 销毁onReachBottom监听
			uni.$off('onPullDownRefresh') // 销毁onPullDownRefresh
		},
		methods: {
			// 跳转到景点推荐页面
			goscenicdetail() {
				uni.navigateTo({
					url: '/packagesIndex/pages/scenic/scenic'
				})
			},
			//跳转到景点详情页面
			getRoutedetails(id) {
				uni.navigateTo({
					url: `/packagesIndex/pages/scenicdetail/scenicdetail?id=${id}`
				})
			},
			// 跳转到tabbar商城页面
			goRecommendation() {
				uni.reLaunch({
					url: `/pages/strategy/strategy?type=${1}`
				})
			},
			// 跳转到路线详情页面
			goRecommendationDetail(id) {
				uni.navigateTo({
					url: `/packagesMe/me/shoppingDetail?id=${id}`
				})
			},

			// 去留言
			goToLeaveMessage() {
				if (this.orderCount == 0) {
					this.show = true
				} else {
					this.showmessage = true
				}
			},
			// 获取留言列表
			async mockFetchMessages() {
				if (this.isLoading || this.noMoreData) return;
				this.isLoading = true;
				try {
					let res = await this.$u.api.getwallMessagelist(this.page);
					if (res.code == 200) {
						if (res.rows.length == 0) {
							this.noMoreData = true;
							return;
						}
						const newMessages = res.rows.map((message, index) => ({
							...message,
							left: 15 + (index % 3) * 30 + Math.random() * 10 - 5,
							top: Math.floor(index / 3) * 220 + Math.random() * 60 - 30,
							rotation: Math.random() * 6 - 3,
						}));
						this.messagePages.push(newMessages);
						this.page.pageNum++;
					}
				} catch (error) {
					console.error('Error fetching messages:', error);
				} finally {
					this.isLoading = false;
				}
			},
			onSwiperChange(e) {
				this.currentSwiperIndex = e.detail.current;
				if (this.currentSwiperIndex === this.messagePages.length - 1 && !this.noMoreData) {
					this.mockFetchMessages();
				}
			},
			// 确认发布留言
			async confirm() {
				let res = await this.$u.api.getwallMessage(this.from)
				if (res.code == 200) {
					this.showmessage = false
					this.messagePages = [];
					this.page.pageNum = 1;
					this.noMoreData = false;
					this.mockFetchMessages()
				} else if (res.code == 302) {
					this.$u.toast(res.msg)
				}
			},
			submitconfirm() {
				this.showmessage = false
				uni.reLaunch({
					url: '/pages/strategy/strategy'
				})
			},
			onTouchStart(e) {
				this.touchStartX = e.touches[0].clientX;
			},
			onTouchEnd(e) {
				const touchEndX = e.changedTouches[0].clientX;
				const diff = touchEndX - this.touchStartX;
				if (Math.abs(diff) > 20) { // 滑动距离大于50px时认为是有效滑动
					if (diff > 0) {
						// 向右滑动，显示上一页
						this.currentSwiperIndex = Math.max(0, this.currentSwiperIndex - 1);
					} else {
						// 向左滑动，显示下一页
						this.currentSwiperIndex = Math.min(this.currentSwiperIndex, this.currentSwiperIndex + 1);
					}
					this.onSwiperChange({
						detail: {
							current: this.currentSwiperIndex
						}
					});
				}
			},
			updateMessagePages() {
				this.messagePages = [];
				for (let i = 0; i < this.messages.length; i += 9) {
					this.messagePages.push(this.messages.slice(i, i + 9));
				}
			},
			// 上传留言图片
			async checkAvatar() {
				let that = this;
				uni.chooseMedia({
					count: 1, //默认9
					mediaType: "image",
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					async success(res) {
						let tempFilePath = res.tempFiles[0].tempFilePath;
						let res_ = await that.$u.api.uploadFile(tempFilePath);
						if (res_.code == 200) {
							that.$u.toast("上传成功！");
							that.from.image = res_.fileName;
						}
					},
				});
			},
			// 确认发布留言
			async confirm() {
				let res = await this.$u.api.getwallMessage(this.from)
				if (res.code == 200) {
					this.showmessage = false
					this.mockFetchMessages()
				} else if (res.code == 302) {
					this.$u.toast(res.msg)
				}
			},
			submitconfirm() {
				this.showmessage = false
				uni.reLaunch({
					url: '/pages/strategy/strategy'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 217rpx 15rpx 100rpx 15rpx;
		box-sizing: border-box;

		.title {
			display: flex;
			align-items: center;

			text {
				font-weight: 600;
				font-size: 32rpx;

				&:nth-child(1) {
					width: 10rpx;
					height: 30rpx;
					display: block;
					background-color: $overall-color;
					margin-right: 15rpx;
				}
			}
		}

		.u-scroll {
			height: 450rpx;
			padding: 20rpx 15rpx;
			box-sizing: border-box;
			background-color: rgb(241, 241, 241);
			margin-bottom: 20rpx;
			border-radius: 0 0 20rpx 20rpx;

			image {
				width: 100%;
				height: 300rpx;
			}

			.scroll-boxImage {
				width: 100%;
				height: 280rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.scroll-title {
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
				margin: 10rpx 0;
			}

			.scroll-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx;

				.scroll-bottom-left {
					display: flex;
					align-items: center;

					.scroll-bottom-image {
						width: 30rpx;
						height: 30rpx;
					}

					.scroll-bottom-name {
						font-weight: 400;
						font-size: 24rpx;
					}
				}

				.scroll-bottom-right {
					display: flex;
					align-items: center;

					.scroll-bottom-right-browse {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

			}
		}

		// 出行路线
		.travel {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin: 20rpx 30rpx;
			background-color: rgb(241, 241, 241);
			padding: 20rpx 15rpx 0 15rpx;
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0 0;

			.travel-left {
				display: flex;
				align-items: center;

				text {
					font-size: 32rpx;

					// &:nth-child(1) {
					// 	width: 10rpx;
					// 	height: 30rpx;
					// 	display: block;
					// 	background-color: $overall-color;
					// 	margin-right: 15rpx;
					// }
				}
			}

			.travel-right {
				display: flex;
				// align-items: center;
				color: #ccc;

				text {
					font-size: 24rpx;
					display: block;
					line-height: 40rpx;
				}
			}
		}

		.box-recommendation {
			background-color: rgb(241, 241, 241);
			padding: 20rpx 15rpx;
			box-sizing: border-box;
			border-radius: 0 0 20rpx 20rpx;

			.recommendation {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: white;
				border-radius: 8rpx;
				margin-bottom:10rpx;
				padding:6rpx 10rpx;

				.recommendation-left {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}

					text {
						display: inline-block;
						width: 400rpx;
						// 超出一行显示省略号
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #333;
					}

				}

				.recommendation-button {
					width:120rpx;
					height:40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: $overall-color;
					border-radius: 8rpx;
					border: 2rpx solid $overall-color;
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}
		}


		.message-swiper {
			height: 820rpx;
			/* 根据需要调整高度 */
			width: 100%;
		}

		.message-stack {
			position: relative;
			height: 100%;
			width: 100%;
		}


		.Wall {
			padding: 30rpx 20rpx;
			background-color: #f1f1f1;
			text-align: center;
			color: #000000;
			border-radius: 20rpx 20rpx 0 0;
			margin-top: 20rpx;

			text {
				display: inline-block;
				text-align: center;
				padding: 12rpx 60rpx;
				background-color: #fff;
				border-radius: 20rpx;
				font-size:32rpx;
				color:#333;
			}
		}


		.message-wall {
			padding: 30rpx;
			box-sizing: border-box;
			// background-color: #E6F2FF;
			background-color: rgb(241, 241, 241);
			position: relative;
			overflow: hidden;
			margin-bottom: 50rpx;
			border-radius: 0 0 20rpx 20rpx;
			min-height: 820rpx; // 增加高度以容纳更多行和重叠
		}

		.message-stack {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			width: 100%;
			left: 0rpx;
			height: 820rpx;
			padding: 20rpx 20rpx 40rpx 20rpx; // 减少上下padding
			box-sizing: border-box;
		}

		.message-card {
			width: 30%; // 设置为大约屏幕宽度的 1/3
			min-height: 28%;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 14rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
			transition: all 0.3s ease;
			margin-bottom: 20rpx;

			&:hover {
				transform: scale(1.05) rotate(0deg) !important; // 悬停时取消旋转
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
				z-index: 100 !important; // 悬停时提升层级
			}

			&.own-message {
				background-color: #E1F0FF;
			}

			image {
				width: 100%;
				height: 140rpx; // 进一步减小高度
				object-fit: cover;
			}
		}

		.own-message-tag {
			position: absolute;
			top: 0rpx;
			left: 10rpx;
			font-size: 24rpx;
			color: $overall-color;
			background-color: #FFFFFF;
			padding: 4rpx 12rpx;
			border-radius: 12rpx;
			z-index: 1;
		}

		.message-content {
			font-size: 24rpx; // 稍微减小字体
			color: #333;
			display: block;
			// max-height: 100rpx; // 限制内容高度，大约4行
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			text-align: center;
			font-size:30rpx;
			// margin:
		}

		.add-message {
			position: absolute;
			bottom: 5rpx;
			right: 20rpx;
			z-index: 999;
			margin-top: 20rpx;
		}

		.leave-message-btn {
			background: $overall-color;
			color: #fff;
			padding: 15rpx 30rpx;
			border-radius: 30rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 4rpx 10rpx $overall-color;
		}

		.btn-icon {
			margin-right: 10rpx;
			font-size: 32rpx;
		}

		.decoration-dot {
			position: absolute;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: $overall-color;
			z-index: 999;
		}

		.top-left {
			top: 20rpx;
			left: 20rpx;
		}

		.bottom-right {
			top: 20rpx;
			right: 20rpx;
		}

		.bottom-left {
			bottom: 20rpx;
			left: 20rpx;
		}


		.modal {
			.value {
				.boxValue {
					text-align: center;

					image {
						width: 200rpx;
						height: 200rpx;
					}

					.label {
						font-size: 20rpx;
						color: #666666;
					}
				}

				.label-title {
					font-size: 28rpx;
					text-align: center;
				}

				input {
					width: 500rpx;
					font-size: 27rpx;
					margin: 20rpx 0;
					border: 1rpx solid #bfbfbf;
					padding: 10rpx 30rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>